<template>
  <div class="nav">
    <div class="left">
      <el-tooltip content="返回项目列表" placement="bottom" effect="light">
        <i style="font-size: 30px" class="el-icon-back" @click="backClick"></i>
      </el-tooltip>
      <span>{{this.paperTitle}}</span>
    </div>
    <div class="center">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item to="/CreateExam">编辑项目</el-breadcrumb-item>
        <el-breadcrumb-item @click.native="publish">发布项目</el-breadcrumb-item>
        <el-breadcrumb-item @click.native="repo">数据报表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="right">
      <el-button @click="preClick">预览</el-button>
      <el-button :plain="true" @click="pubClick">发布</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "CreateExamBar",
    data(){
      return{
        paperTitle: '考试标题',
        release:0
      }
    },
    computed: {
      getPaperTitle(){
        return this.$store.state.paperTitle
      }
    },
    watch: {
      getPaperTitle(){
        this.paperTitle = this.$store.state.paperTitle.paperTitle
      }
    },
    methods: {
      publish(){
        this.$message({
          type: 'warning',
          message: '项目没有发布!'
        });
      },
      repo(){
        this.$message({
          type: 'warning',
          message: '该考卷暂时没有数据提交!'
        });
      },
      backClick(){
        this.$router.push('/Mine');
      },
      preClick(){
        this.$router.push('/Preview');
      },
      pubClick(){
        this.$store.commit('getPubClick', {
          release: this.release,
        });
        this.release++;
      }
    }
  }
</script>

<style scoped>
.nav {
  display: flex;
  justify-content:space-between;
  width: 100%;
  height: 60px;
  background-color: #B3C0D1;
}
.nav .left {
  font-size: 16px;
  line-height: 60px;
}
.nav .left i {
  vertical-align:middle;
  margin-right: 20px;
}
.nav .left i:hover {
  text-shadow: 1px 1px 5px #898181;
}
.el-breadcrumb {
  font-size: 16px;
  line-height: 60px;
}
.center>>>.el-breadcrumb__inner {
  font-weight: normal;
  color: #484848;
  padding: 5px 5px;
}
.center>>>.el-breadcrumb__inner:hover {
  border-bottom: 2px solid #409EFF;
  color: #409EFF;
}
.center>>>.el-breadcrumb__separator {
  color: #E9EEF3;
}

.nav .right {
  font-size: 15px;
  line-height: 60px;
}
.nav .right span {
  padding: 0 7px;
}
.nav .right svg {
  font-size: 25px;
}

</style>
